<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      :spacing="14"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            label="方案名称："
            prop="proposalName"
            label-width="100px"
          >
            <el-input v-model="queryParams.proposalName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="编码：" prop="code" label-width="60px">
            <el-input v-model="queryParams.code" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/proposal/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
    >
    </table-panel>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import { deletePlanList } from "@/api/planManage/marketing.js";
export default {
  components: {
    TablePanel,
    QueryPanel,
  },
  data() {
    return {
      queryParams: {
        proposalName: "",
        code: "",
      },
      operateArray: [
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          field: "code",
          label: "编码",
          slots: { default: "link" },
        },
        {
          field: "proposalName",
          label: "方案名称",
        },
        {
          field: "userName",
          label: "录入人",
        },
        {
          field: "createTime",
          label: "创建时间",
          type: "date",
        },
        {
          label: "操作",
          width: "105px",
        },
      ],
    };
  },
  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 操作列回调
    onOperate(type, row) {
      this.$confirm("确认删除吗？").then(() => {
        deletePlanList(row.quoteProposalId)
          .then((res) => {
            this.$message.success("操作成功！");
            this.$refs.tablePanel.getTable();
          })
          .catch((err) => {
            this.$message.error("操作失败！");
          });
      });
    },
  },
};
</script>

<style>
</style>